<!--爆管监控-->
<template>
  <div style="width:100%;height:91%;margin-top:2px;">
      <!--对半分-->
      <div v-show="allWin" style="width:40%;height:98%;float:left;margin-left:5px;">
        <div style="width:99%;height:100%;margin:2px 2px;border:4px solid #019BA0;">
                <div>
                  <el-table
                     height="300"
                     stripe
                     :data="gridData">
                      <el-table-column fixed  property="areaName" label="名称" width="150"></el-table-column>
                      <el-table-column property="level" label="风险等级" width="100"></el-table-column>
                      <el-table-column property="time" label="监控时间" width="200"></el-table-column>
                      <el-table-column fixed="right" property="discription" label="概述" width="200"></el-table-column>
                    </el-table>
                </div>
                <div style="margin-top: 10px;margin-left: 10px;">
                  <el-button type="success" v-if="wl" @click="waterLevel()">开始监控</el-button>
                  <el-button type="danger" v-if="!wl" @click="stopWaterLevel()">停止监控</el-button>
                </div>
                <div style="width:98%;height:300px;">
                  <div style="margin-left: 10px;">
                    <br>
                    <span id="sp1" class="sp"></span><br>
                    <span id="sp2" class="sp"></span><br>
                    <span id="sp3" class="sp"></span><br>
                    <span id="sp4" class="sp"></span><br>
                    <span id="sp5" class="sp"></span><br>
                    <span id="sp6" class="sp"></span><br>
                    <span id="sp7" class="sp"></span><br>
                    <span id="sp8" class="sp"></span><br>
                  </div>
                </div>
        </div>
      </div>
      <div :class="css">
        <div style="width:100%;height:100%;margin:2px 2px;border:4px solid #019BA0;" id="bdMap">
        </div>
        <div class="btn-wrap" style="z-index: 99;" v-show="getall">
           <el-button class="btn" @click = "getAll()">大图</el-button>
        </div>
        <div class="warn" style="z-index: 99;"  v-show="danger">
           <audio ref="audio" id="audio">&nbsp;</audio>
           <el-button type="danger" >警告</el-button>
        </div>
      </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //样式
        allWin:false,
        css:'allWin',
        addVisible:false,
        getall:false,
        danger:false,
        map: "",
        point: "",
        lng: 114.57357436016315,
        lat: 30.55793281044067,
        level:12,
        clickAddress:0,
        gridData: [],
        wl:true,
        timer:'',
        onlamp:'',
        offlamp:'',
        cs:'',
        num:0,
        count:0,
        audioPlay:'',
        wls:'',
      }

    },
    methods: {

      handler() {
        let map = new BMapGL.Map(bdMap);
        var point = new BMapGL.Point(this.lng,this.lat);
        map.centerAndZoom(point,this.level);
        // 添加城市列表控件
        var cityCtrl = new BMapGL.CityListControl({
          anchor: BMAP_ANCHOR_TOP_LEFT,  //位于地图左上方
        });
        map.addControl(cityCtrl);

        map.addControl(new BMapGL.MapTypeControl({//添加地图类型控件
            mapTypes:[
             BMAP_NORMAL_MAP,
             BMAP_HYBRID_MAP
            ],
        }));
        map.enableScrollWheelZoom(true);
        map.addEventListener('click', e=> {
           if(e.latlng.lng>=113.41 && e.latlng.lng<=115.05 && e.latlng.lat>=29.58 && e.latlng.lat<=31.22){
                 //alert(e.latlng.lng+","+e.latlng.lat)
                 this.css='rightWin';
                 this.allWin=true;
                 this.getall=true;
                 this.axios.get("/boom/getAll").then(res=>{
                   this.gridData=res.data.data;
                 });
                 /* this.lng=114.36285629043486;
                 this.lat=30.32872335666815;
                 this.handler(); */
           }

        });

      },
      getAll(){
        this.allWin=false;
        this.getall=false;
        this.css='allWin';
        this.wls='';
        this.num=0;
        this. stopWaterLevel();


      },
      waterLevel(){
        this.wl=false;
        //this.ces();
        if(this.timer){
          clearInterval(this.timer);
        }
        var i=1;
        this.timer=setInterval(() =>{
          this.axios.get("/boom/waterLevel").then(res=>{
            console.log(res.data.data)
              let name=res.data.data.addressName;
              let level=res.data.data.level;
              if(i==9){
                for(let k=1;k<=8;k++){
                  document.getElementById("sp"+k).innerHTML='';
                }
                i=1;
              }
              console.log("i:"+i)
              if(level>4){
                document.getElementById("sp"+i).innerHTML='<span style="color:red;font-size:20px;">地区:'+name+',水位'+level+',警告'+'</span>';
              }else{
                document.getElementById("sp"+i).innerHTML='<span style="color:#019BA0;font-size:18px;">地区:'+name+',水位'+level+'</span>';
              }
              i++;
              if(level>4){
                this.onLamp();
                this.Play();

              }else{
                this.danger=false;
                this.stopBJ();
                this.Pause();
              }
          })


        }, 1000);

      },
      Play(){
          this.audioPlay = this.$refs.audio;
          let playPath='static/bj.mp3'; //本地音频路径
          this.audioPlay.src =playPath;
          this.audioPlay.play();
          this.audioPlay.onended = function() {
              this.audioPlay.play();
          }
      },
      Pause(){
        this.audioPlay = this.$refs.audio;
        let playPath='static/bj.mp3'; //本地音频路径
        this.audioPlay.src =playPath;
        this.audioPlay.pause();
        this.audioPlay='';
      },
      onLamp(){
        this.danger=true;
        this.onlamp=setTimeout(() =>{
          this.danger=true;
        },300);
        this.offlamp=setTimeout(() =>{
          this.danger=false;
        },300);
      },
      ces(){
        this.cs=setInterval(() =>{
          this.num=this.num+1;
        }, 500);
      },
      stopWaterLevel(){
        clearInterval(this.timer);
        clearInterval(this.cs);
        this.stopBJ();
        this.danger=false;
        this.Pause();
        this.wl=true;
        this.num=0;
      },
      stopBJ(){
        clearTimeout(this.onlamp);
        clearTimeout(this.offlamp);
      }
    },
    mounted() {
      this.handler();
    }
  }
</script>

<style>
 .rightWin{
   width:58%;height:98%;float:left;margin-left:7px;
 }
 .allWin{
   width:98%;height:98%;float:left;margin-left:7px;
 }
 .btn-wrap {
   position: fixed;
   bottom: 3.5rem;
   margin-left: 3rem;
   padding: 1rem 1rem;
   border-radius: .25rem;
   background-color: #fff;
   box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
  }
  .warn{
    position: fixed;
    bottom:360px;
    margin-left:200px;
  }
  .btn{
    background-color:#019BA0;
    color: white;
  }
  .btn:hover{
    background-color: rgba(27, 142, 236, 0.5);
    color:white;
  }
  .sp{
    margin-bottom:10px;
  }
</style>
